<template>
    <div id="map">
        <div id="mouse-position" ref="position">
        </div>
    </div>

</template>

<script>
    import {Map, View} from 'ol'
    import OSM from 'ol/source/OSM'
    import TileLayer from 'ol/layer/Tile'
    import {MousePosition} from 'ol/control';
    import {createStringXY} from 'ol/coordinate';

    export default {
        name: "PositionControl",
        data() {
            return {
                map: null,
            }
        },
        mounted() {
            this.map = new Map({
                target: 'map',
                layers: [
                    new TileLayer({
                        source: new OSM()
                    })
                ],
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置,
                    projection: "EPSG:4326",
                    zoom: 12
                })
            })
            this.mousePositionCtl()
        }
        , methods: {
            mousePositionCtl() {
                let mousePosition = new MousePosition({
                    //坐标格式
                    coordinateFormat: createStringXY(9),
                    //坐标的投影默认使用的是view视图的投影
                    projection: 'EPSG:4326',
                    //坐标信息显示样式类名，默认是'ol-mouse-position'
                    className: 'custom-mouse-position',
                    //指定鼠标控件挂载的位置
                    target: this.$refs.position,
                    //未定义坐标的标记
                    placeholder: '未识别鼠标位置',
                    render:this.renderPosition(),//重新呈现控件时调用的函数
                });
                this.map.addControl(mousePosition)
            },
            renderPosition(){
                console.log("renderPosition")
            }

        }

    }
</script>

<style scoped>
    #map {
        position: relative;
    }

    #mouse-position {
        position: absolute;
        left: 50px;
        bottom: 50px;
        z-index: 9999;
    }

</style>